<template>
	<div class="keyboard" :style="{height:height+'px'}">

		<div class="box">

			<up-row>
				<up-col span="1">
					1
				</up-col>
				<up-col span="9.5">

					<up-row>
						<up-col span="4">
							<div class="item_num">1</div>
						</up-col>
						<up-col span="4">
							<div class="item_num">1</div>
						</up-col>
						<up-col span="4">
							<div class="item_num">1</div>
						</up-col>
					</up-row>


					<up-row>
						<up-col span="4">
							<div class="item_num">1</div>
						</up-col>
						<up-col span="4">
							<div class="item_num">1</div>
						</up-col>
						<up-col span="4">
							<div class="item_num">1</div>
						</up-col>
					</up-row>


					<up-row>
						<up-col span="4">
							<div class="item_num">1</div>
						</up-col>
						<up-col span="4">
							<div class="item_num">1</div>
						</up-col>
						<up-col span="4">
							<div class="item_num">1</div>
						</up-col>
					</up-row>





				</up-col>
				<up-col span="1.5">
					1
				</up-col>
			</up-row>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				height: 0
			}
		},
		mounted() {
			console.log("mounted")
			this.getHeight()
		},

		methods: {
			getHeight() {
				const info = uni.getSystemInfoSync()
				this.height = info.screenHeight * 0.3
			},
		}
	}
</script>

<style>
	.keyboard {
		width: 100%;
		background: #ffffff;
		position: absolute;
		bottom: 0;
	}

	.keyboard .box {
		width: 680rpx;
		margin: 0 auto;
		text-align: center;
	}

	.keyboard .box .item_num {
		width: 100%;
		text-align: center;
	}
</style>